<div class="menu">
  <h6 class="menu__label">
    {{ if .IsHome }}
      {{ .Site.Title }}
    {{ else }}
      {{ $.Param "Title" }}
    {{ end }}
  </h6>
  <ul>
    {{ $currentURL := .Permalink }}
    {{ range (.Site.GetPage "section" .Type).Pages }}
      {{ $sectionName1 := index (last 1 (split (delimit (split .Permalink "/") "," "") ",")) 0 }}
      {{ $sectionName2 := index (last 2 (split (delimit (split $currentURL "/") "," "") ",")) 0 }}
      {{ if .Params.Collapsible }}
        <span class="menu__title--collapse {{ if and (in $currentURL .Permalink) (eq $sectionName1 $sectionName2) }}active{{ end }}">
          {{ .Title }}
          <span class="menu__title--icon {{ if and (in $currentURL .Permalink) (eq $sectionName1 $sectionName2) }}{{ if eq ($.Param "languagedir") "rtl" }}downrtl{{ else }}down{{ end }}{{ else }}right{{ end }}">
            {{ if eq ($.Param "languagedir") "rtl" }}
              {{ partial "svgs/arrow-left.svg" (dict "width" 22 "height" 22) }}
            {{ else }}
              {{ partial "svgs/arrow-right.svg" (dict "width" 22 "height" 22) }}
            {{ end }}
          </span>
        </span>
        <ul class="menu__list {{ if and (in $currentURL .Permalink) (eq $sectionName1 $sectionName2) }}active{{ end }}">
          {{ range .Pages.ByWeight }}
            {{ $lastUrlElement1 := index (last 1 (split (delimit (split .Permalink "/") "," "") ",")) 0 }}
            {{ $lastUrlElement2 := index (last 1 (split (delimit (split $currentURL "/") "," "") ",")) 0 }}
            <li>
              <a href="{{ .Permalink }}" class="menu__title {{ if and (eq $lastUrlElement1 $lastUrlElement2) (eq $sectionName1 $sectionName2) }}active{{ end }}">{{ .Title }}</a>
            </li>
          {{ end }}
        </ul>
      {{ else }}
        {{ $lastUrlElement1 := index (last 1 (split (delimit (split .Permalink "/") "," "") ",")) 0 }}
        {{ $lastUrlElement2 := index (last 1 (split (delimit (split $currentURL "/") "," "") ",")) 0 }}
        <li class="{{ if and (eq $lastUrlElement1 $lastUrlElement2) (eq $sectionName1 $sectionName2) }}active{{ end }}">
          <a href="{{ .Permalink }}" class="menu__title {{ if and (eq $lastUrlElement1 $lastUrlElement2) (eq $sectionName1 $sectionName2) }}active{{ end }}">{{ .Title }}</a>
        </li>
      {{ end }}
    {{ end }}
  </ul>
</div>

<script>
  var menuTitle = document.querySelectorAll('.menu__title');
  var modal = document.getElementById("myModal");
  var drawer = document.getElementById('myDrawer');

  var closeDrawer = function () {
    setTimeout(function () {
      modal.style.opacity = 0;
      drawer.style.left = '-100%';
      modal.style.left = '-100%';
    }, 250);
  }

  menuTitle ? 
  menuTitle.forEach(function(elem) {
    elem.onclick = function() {
      closeDrawer();
      localStorage.setItem('isDrawerOpen', 'false');
    }
  }) : null;
</script>